<template>
  <div class="device-config">
    <h2 class="page-title">设备配置</h2>

    <div class="config-card">
      <van-form @submit="saveConfig">
        <van-cell-group inset>
          <van-field
              v-model="deviceConfig.name"
              label="设备名称"
              placeholder="请输入设备名称"
          />

          <van-field
              v-model="deviceConfig.location"
              label="安装位置"
              placeholder="请输入安装位置"
          />

          <van-field
              v-model="deviceConfig.description"
              label="设备描述"
              placeholder="请输入设备描述"
              type="textarea"
              autosize
          />

          <van-field name="switch" label="自动更新">
            <template #input>
              <van-switch v-model="deviceConfig.autoUpdate" size="20" />
            </template>
          </van-field>

          <van-field name="switch" label="启用远程控制">
            <template #input>
              <van-switch v-model="deviceConfig.remoteControl" size="20" />
            </template>
          </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            保存配置
          </van-button>
        </div>
      </van-form>
    </div>

    <div class="config-card">
      <h3 class="card-title">亮度设置</h3>
      <div class="slider-container">
        <span class="slider-label">亮度级别</span>
        <van-slider v-model="brightness" bar-height="4px" active-color="#1989fa">
          <template #button>
            <div class="custom-button">{{ brightness }}</div>
          </template>
        </van-slider>
      </div>

      <div class="button-group">
        <van-button type="primary" plain @click="applyBrightness">应用</van-button>
        <van-button type="default" plain @click="resetBrightness">重置</van-button>
      </div>
    </div>

    <div class="config-card">
      <h3 class="card-title">图片上传</h3>
      <p class="tip">配置页面需要上传图片？请前往图片上传页面</p>
      <van-button type="primary" block @click="$emit('change-tab', 'upload')">
        前往图片上传
      </van-button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { Toast } from 'vant'

export default {
  emits: ['change-tab'],

  setup() {
    // 设备配置数据
    const deviceConfig = reactive({
      name: '主控设备 #001',
      location: '会议室',
      description: '会议室主控设备，负责灯光和空调控制',
      autoUpdate: true,
      remoteControl: false
    })

    // 亮度设置
    const brightness = ref(70)

    // 保存配置
    const saveConfig = () => {
      Toast.success('配置已保存')
      console.log('设备配置:', deviceConfig)
    }

    // 应用亮度设置
    const applyBrightness = () => {
      Toast(`亮度已设置为 ${brightness.value}%`)
    }

    // 重置亮度设置
    const resetBrightness = () => {
      brightness.value = 70
      Toast('亮度已重置')
    }

    return {
      deviceConfig,
      brightness,
      saveConfig,
      applyBrightness,
      resetBrightness
    }
  }
}
</script>

<style scoped>
.page-title {
  padding: 20px 0 15px;
  font-size: 24px;
  font-weight: 600;
  color: #1989fa;
}

.config-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.slider-container {
  padding: 15px 0;
}

.slider-label {
  display: block;
  margin-bottom: 15px;
  color: #666;
}

.custom-button {
  width: 36px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  background-color: #1989fa;
  border-radius: 9px;
}

.button-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.tip {
  color: #888;
  font-size: 14px;
  margin: 15px 0;
}
</style>